<template>
  <a-layout id="components-layout-demo-custom-trigger" style="height:100%">
    <a-layout-sider v-if="leftShow" class="sider-box" theme="light" v-model="collapsed" :trigger="null" collapsible>
      <div class="logo-title">
        <img src="@/assets/logo.png" alt="">
        巡视巡察数据填报系统
      </div>
      <div class="menus-box">
        <a-menu
          v-model="current"
          :inlineIndent="inlineIndent"
          :defaultSelectedKeys="[$route.path]"
          :openKeys="openKeys"
          mode="inline"
          :inline-collapsed="collapsed"
          @openChange="onOpenChange"
          @click="menuClick">
          <!-- 菜单遍历的开始 -->
          <template v-for="item in list">
            <!-- 如果当前遍历项没有children，视为子菜单项，注意所有的key都是path用于路由跳转，以及当前选中记录 -->
            <a-menu-item v-if="!item.children && !item.leftShow " :key="item.path">
              <i :class="item.icon" />
              <span>{{ item.title }}</span>
            </a-menu-item>
            <!-- 否则视为子菜单，传入菜单信息并且运用下面定义的函数式组件 -->
            <!-- <sub-menu v-else :key="item.path" :menu-info="item" /> -->
          </template>
        </a-menu>
      </div>
    </a-layout-sider>
    <a-layout>
      <header class="header">
        <a @click="changePassword">修改密码</a>
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            应用切换
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay" @click="handleClick">
            <a-menu-item key="2" :disabled="leftShow">
              整改监督
            </a-menu-item>
            <a-menu-item key="1" :disabled="!leftShow">
              调阅资料
            </a-menu-item>
          </a-menu>
        </a-dropdown>
        <PeiodWheelGroup :path="$route.path" v-model='PeiodWheelGroupQuery' ref="whel"></PeiodWheelGroup>
      </header>
<!--      <div class="heng"></div>-->
      <div class="layout">
        <router-view />
      </div>

    </a-layout>
    <a-modal
      title="修改密码"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="取消"
      okText="确认"
      :z-index="1000"
    >
      <div class="formbox">
        <a-form-model
          ref="ruleForm"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          :rules="rules"
          :model="ruleForm"
          class="formbox"
        >
          <a-form-model-item label="原始密码" class="formtabMax" prop="initialPassword">
            <a-input placeholder="原始密码" v-model="ruleForm.initialPassword" type="password" />
          </a-form-model-item>
          <a-form-model-item label="新密码" class="formtabMax" prop="newPassword">
            <a-input placeholder="新密码" v-model="ruleForm.newPassword" type="password" />
          </a-form-model-item>
          <a-form-model-item label="确认密码" class="formtabMax" prop="isPassword">
            <a-input placeholder="确认密码" v-model="ruleForm.isPassword" type="password" />
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>
  </a-layout>
</template>
<script>
import SubMenu from './meus/SubMenu';
import {
  getPassWord, editPassWord,
} from '@/utils/JsonTools';
import { mapMutations, mapState } from 'vuex';
import { Session } from '@/utils/storage';
import PeiodWheelGroup from '@/components/PeiodWheelGroup.vue';

export default {
  name: 'meus',
  // 注册局部组件
  // eslint-disable-next-line vue/no-unused-components
  components: { PeiodWheelGroup, SubMenu },
  data() {
    return {
      PeiodWheelGroupQuery: {},//届轮组
      current: ['/home'],
      // 菜单缩进
      inlineIndent: 12,
      // 默认不折叠
      collapsed: false,
      // 全部顶级父节点,用来控制所有父级菜单只展开其中的一项，可用遍历菜单信息进行赋值
      rootSubmenuKeys: [],
      // 展开的父菜单项
      openKeys: [],
      // 选中的子菜单项
      defaultSelectedKeys: [this.$route.path],
      // 菜单信息，可从后台获取
      list: this.$router.options.routes[1].children,
      // 弹框显示
      visible: false,
      // 弹框加载状态
      confirmLoading: false,
      ruleForm: {},
      // 表单标题内容宽度设置
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      // 表单规则
      rules: {
        initialPassword: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
        newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        isPassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
      },
    };
  },
  computed: {
    ...mapState({
      leftShow: state => state.leftShow,
    }),
  },
  watch: {
    // 监听路由的变化
    $route: {
      handler(to) {
        let arr = [to.fullPath];
        this.current = [...arr];
      },
      deep: true,
    },
  },
  created() {
    // 将从缓存中取出openKeys
    const openKeys = Session.get('openKeys');
    if (openKeys) {
      // 存在即赋值
      this.openKeys = JSON.parse(openKeys);
    }
    if (Session.get('leftShow')) {
      // 存在即赋值
      this.setLeftShow(Session.get('leftShow'));
    }
  },
  methods: {
    ...mapMutations(['setLeftShow']),
    // 点击菜单，路由跳转,注意的是当点击MenuItem才会触发此函数
    menuClick({ item, key, keyPath }) {
      // 获取到当前的key,并且跳转
      this.$router.push({
        path: key,
      });
    },
    onOpenChange(openKeys) {
      // 将当前打开的父级菜单存入缓存中
      Session.set('openKeys', JSON.stringify(openKeys));
      //  控制只打开一个
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    handleClick(e) {
      if (e.key === '1') {
        this.setLeftShow(false);
        this.$router.push({ path: '/fileList' }).catch(() => {
        });
        // eslint-disable-next-line eqeqeq
      } else if (e.key == '2') {
        this.setLeftShow(true);
        this.$router.push({ path: '/home' }).catch(() => {
        });
      } else {

      }
      Session.set('leftShow', this.leftShow);
    },
    // 修改密码
    changePassword() {
      this.visible = true;
    },
    handleOk(e) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true;
          if (this.ruleForm.newPassword !== this.ruleForm.isPassword) {
            this.confirmLoading = false;
            this.$message.error('新密码与确认密码不同，修改密码失败');
          } else {
            getPassWord().then(res => {
              if (res.password === this.ruleForm.initialPassword) {
                let obj = {
                  password: this.ruleForm.newPassword,
                };
                editPassWord(obj).then(res => {
                  // eslint-disable-next-line eqeqeq
                  if (res == 1) {
                    this.confirmLoading = false;
                    this.visible = false;
                    this.$message.success('修改密码成功');
                  } else {
                    this.$message.error('修改密码失败');
                  }
                });
              } else {
                this.confirmLoading = false;
                this.$message.error('原始密码错误，修改密码失败');
              }
            });
          }
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
    },
    getcurDate() {
      let currentDate = new Date();
      let year = currentDate.getFullYear().toString();
      let month = (currentDate.getMonth() + 1).toString();
      if (month.length === 1) {
        month = '0' + month;
      }
      let date = currentDate.getDate().toString();
      if (date.length === 1) {
        date = '0' + date;
      }
      let hour = currentDate.getHours().toString();
      if (hour.length === 1) {
        hour = '0' + hour;
      }
      let minute = currentDate.getMinutes().toString();
      if (minute.length === 1) {
        minute = '0' + minute;
      }
      let second = currentDate.getSeconds().toString();
      if (second.length === 1) {
        second = '0' + second;
      }
      return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
    },
  },
};
</script>
<style lang="scss" scoped>
.layout {
  height: calc(100vh - 100px);
  padding: 12px;
  color: #333;
  margin: 16px;
  background: #fff;
  box-shadow: 0px 2px 8px 0px rgba(58, 109, 189, 0.3);
  border-radius: 4px;
}

.sider-box {
  background: #1e2d50;
  color: #fff;

  .logo-title {
    line-height: 70px;
    border-bottom: 1px solid #0399ff;
    font-size: 18px;
    font-weight: bold;

    img {
      width: 45px;
      height: 45px;
      margin-right: 10px;
    }
  }

  .menus-box {
    height: calc(100% - 80px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .ant-menu {
    margin-top: 14px;
    background: #1e2d50;
    color: #fff;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: #1982f9;
    color: #fff;
  }
}

.header {
  line-height: 70px;
  background: #fff;

  a {
    float: right;
    margin-right: 5%;
  }
}

.heng {
  background: #f0f2f5;
  height: 20px;
}

::v-deep .ant-layout-content {
  background: #fff;
}
</style>
